<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Emmet语法快速生成文章列表页的代码和样式</title>
		<style>
			li {
				list-style-type: none;
				
			}
			/* 注意css代码的注释和html代码的注释不一样 */
			/* css一般采用简写的形式，然后按tab键会自动生成代码 */
			div	{
				border: 1px solid red;
				height: 100px;
				width: 100px;
				background-color: #ba4aff;
				/* text-decoration: none; */
			}
			a {
				text-decoration: none;
			}
		</style>
	</head>
	<body>
		
		<ul>
			<li><a href="">前端开发</a></li>
			<li><a href="">后端开发</a></li>
			<li><a href="">云计算/大数据</a></li>
			<li><a href="">移动开发</a></li>
			<li><a href="">人工智能</a></li>
		</ul>
		
		<!-- 生成单个标签：输入标签名，然后按tab键 -->
		<p>这是p标签</p>
		<!-- 生成多个标签：输入标签名*数量，如li*3，然后按tab键 -->
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<!-- 生成父子标签：输入父标签名>子标签名，如ul>li -->
		<ul>
			<li>111</li>
		</ul>
		<ul>
			<li></li>
			<li></li>
		</ul>
		<!-- 生成兄弟标签：输入标签名+标签名，如div + p -->
		<div>dddd</div>
		<p></p>
		<!-- 生成带有类名的标签：输入标签名.类名，然后按tab键 -->
		<div class="demo">mmmm</div>
		<p class="demo1"></p>
		<!-- 生成类名有顺序的标签:标签名.类名$*数量，如p.demo$*5 -->
		<p class="demo1"></p>
		<p class="demo2"></p>
		<p class="demo3"></p>
		<!-- 生成标签里边默认带一点内容：输入标签名{内容} -->
		<div>我是div</div>
		<!-- 生成标签里边默认带一些具有顺序的数字：标签名{$}*数量 -->
		<span>1</span><span>2</span><span>3</span>
		
		
	</body>
</html>